<template>
  <div class="submit-part">
    <div class="form">
      <el-input
        class="text"
        :placeholder="reply ? reply : '随便说说'"
        v-model="commentOne.text"
        type="textarea"
        rows="5"
      ></el-input>
      <el-input
        class="input"
        placeholder="名字"
        v-model="commentOne.name"
      ></el-input>
      <el-input
        class="input"
        placeholder="邮箱"
        v-model="commentOne.email"
        type="email"
      ></el-input>
      <el-input
        class="input"
        placeholder="网址"
        v-model="commentOne.url"
      ></el-input>
    </div>
    <div class="option">
      <el-button type="primary" @click="send">小评一下</el-button>
    </div>
  </div>
</template>

<script setup>
import api from "@/http/api";
import { API_BLOG_AID_COMMENT } from "@/http/url";

const props = defineProps({
  aid: String | Number,
  pid: String | Number,
  reply: String,
});

const commentOne = ref({
  text: "",
  email: "",
  name: "",
  url: "",
});

const emits = defineEmits(["ok"]);

function send() {
  localStorage.setItem(
    "aosidufgqoiwerv",
    JSON.stringify({
      email: commentOne.value?.email || "",
      name: commentOne.value?.name || "",
      url: commentOne.value?.url || "",
    })
  );
  const data = {
    text: `${commentOne.value?.text || ""}`,
    email: commentOne.value?.email || "",
    name: commentOne.value?.name || "",
    url: commentOne.value?.url || "",
    aid: props.aid || "",
    pid: props.pid || "",
  };
  api
    .post(API_BLOG_AID_COMMENT(data.aid), data)
    .then((res) => {
      if (res.ok) {
        data.id = res.data[0];
        data.createTime = new Date().toLocaleString();
        emits("ok", data);
        ElMessage.success(res.message);
      } else {
        ElMessage.warning(res.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
}

onMounted(() => {
  const data = JSON.parse(localStorage.getItem("aosidufgqoiwerv") || "{}");
  commentOne.value.url = data?.url || "";
  commentOne.value.email = data?.email || "";
  commentOne.value.name = data?.name || "";
});
</script>

<style lang="scss" scoped>
.submit-part {
  background-color: #fff;
  padding: 16px;
  .form {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    .text {
      width: 100%;
    }
    .input {
      flex: 1;
    }
  }
  .option {
    padding-top: 16px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
